<template>
	<view class="rankingList">
		<!-- tab 栏 -->
		<view class="tab_box flex-r-a-c">
			<view class="tab_item" :class="item.tabIndex == tabCurrent ? 'active' : ''" v-for="(item,index) in tabList"
				:key="index" :data-tabCurrent="item.tabIndex" @tap="tabChange">
				{{item.name}}
			</view>
		</view>
		<!-- 时间筛选 -->
		<view class="timeScreen flex-r-a-c">
			<view class="startScreen list">
				<view @tap.stop="isStart = true">{{startTime}}</view>
				<u-picker v-model="isStart" mode="time" @confirm="getStartTime" :params="{year: true, month: true, day: true, hour: true, minute: true}"></u-picker>
			</view>
			<view style="color: #767676; font-size: 28rpx; font-weight: 500;">至</view>
			<view class="endScreen list">
				<view @tap.stop="isEnd = true">{{endTime}}</view>
				<u-picker v-model="isEnd" mode="time" @confirm="getEndTime" :params="{year: true, month: true, day: true, hour: true, minute: true}"></u-picker>
			</view>
		</view>
		<!-- 排行榜 -->
		<view class="rankingList">
			<view class="list_t">
				<u-row gutter="10">
					<u-col span="3" textAlign="center" v-for="(item,index) in rankingListTop" :key="index">
						<view class="text">{{item}}</view>
					</u-col>
				</u-row>
			</view>
			<view class="list">
				<u-row gutter="10" v-for="(item,index) in rankingList" :key="index">
					<u-col span="3" textAlign="center">
						<view class="text" v-if=" pageData.type == 1 ? item.rank == 1 : item.level == 1">
							<image src="/static/mine/phb1.png" mode=""></image>
						</view>
						<view class="text" v-else-if=" pageData.type == 1 ? item.rank == 2 : item.level == 2">
							<image src="/static/mine/phb2.png" mode=""></image>
						</view>
						<view class="text" v-else-if=" pageData.type == 1 ? item.rank == 3 : item.level == 3">
							<image src="/static/mine/phb3.png" mode=""></image>
						</view>
						<view class="text" v-else>{{ pageData.type == 1 ? item.rank : item.level }}</view>
					</u-col>
					<u-col span="3" textAlign="center">
						<view class="text one-line-ellipsis">{{item.nickname}}</view>
					</u-col>
					<u-col span="3" textAlign="center">
						<view class="text one-line-ellipsis">{{ pageData.type == 1 ? item.identity : item.rank }}</view>
					</u-col>
					<u-col span="3" textAlign="center">
						<view class="text">{{ pageData.type == 1 ? item.count : item.pcont }}</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<!-- 自己排名 -->
		<view class="ownRanking">
			<view class="list flex-r-a-c">
				<view class="ranking">{{ pageData.type == 1 ? ownRanking.rank : ownRanking.level}}</view>
				<view class="name">{{ownRanking.nickname}}</view>
				<view class="identity">{{ pageData.type == 1 ? ownRanking.identity : ownRanking.rank}}</view>
				<view class="peopleNumber">{{ pageData.type == 1 ? ownRanking.count : ownRanking.pcont}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageData: {}, // 页面数据
				isStart: false, // 开始的筛选时间
				isEnd: false, // 结束的筛选时间	
				startTime: uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM'),
				endTime: uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM'),
				tabCurrent: 1, // tab 下标
				tabList: [ // tab 数据
					{
						name: '直推人数',
						tabIndex: 1,
					}, {
						name: '销售额',
						tabIndex: 2,
					},
				],
				rankingListTop: ['名次', '昵称', '身份', '人数'], // 排行榜的标题栏
				rankingList: [], // 排行榜的数据
				ownRanking: {} // 自己的排行榜
			};
		},
		onLoad(el) {
			this.pageData = el
			el.type == 1 ? this.getRankingList() : this.getAgentRankingList()
		},
		methods: {
			// 获取代理排行榜
			getAgentRankingList(start,end){
				let that = this
				let data = {
					type: that.tabCurrent,
					starttime: start == undefined ? that.startTime : start,
					endtime: end == undefined ? that.endTime : end
				}
				that.$api.agent_distRank(data).then(res => {
					console.log(res)
					that.rankingList = res.data.data.list
					that.ownRanking = res.data.data.my
				})
			},
			// 获取排行榜
			getRankingList(start,end){
				let that = this
				let data = {
					type: that.tabCurrent,
					starttime: start == undefined ? that.startTime : start,
					endtime: end == undefined ? that.endTime : end
				}
				that.$api.ranking_list(data).then(res => {
					console.log(res)
					that.rankingList = res.data.data.subordinate
					that.ownRanking = res.data.data.self[0]
				})
			},
			
			// tab 切换
			tabChange(e) {
				this.tabCurrent = e.currentTarget.dataset.tabcurrent
				this.tabCurrent == 1 ? this.rankingListTop[3] = '人数' : this.rankingListTop[3] = '金额'
				// this.getRankingList(this.startTime,this.endTime)
				this.pageData.type == 1 ? this.getRankingList(this.startTime, this.endTime) : this.getAgentRankingList(this.startTime, this.endTime)
			},
			// 开始时间筛选
			getStartTime(e) {
				if(uni.getSystemInfoSync().platform == 'ios'){
					var startTime = `${e.year}/${e.month}/${e.day} ${e.hour}:${e.minute}`
					var end = new Date(this.endTime.replace( /-/g, '/') ).getTime()
				} else {
					var startTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
					var end = new Date(this.endTime).getTime()
				}
				let start = new Date(startTime).getTime()
				if(start > end){
					uni.showToast({
						title: '开始时间不能大于结束时间',
						icon: 'none'
					})
				} else {
					if(uni.getSystemInfoSync().platform == 'ios'){
						this.startTime = startTime.replace( /\//g, '-')
					} else {
						this.startTime = startTime 
					}
					this.pageData.type == 1 ? this.getRankingList(this.startTime, this.endTime) : this.getAgentRankingList(this.startTime, this.endTime)
				}
			},
			// 结束时间筛选
			getEndTime(e) {
				if(uni.getSystemInfoSync().platform == 'ios'){
					var endTime = `${e.year}/${e.month}/${e.day} ${e.hour}:${e.minute}`
					var start = new Date( this.startTime.replace( /-/g, '/' ) ).getTime()
				} else {
					var endTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
					var start = new Date(this.startTime).getTime()
				}
				let end = new Date(endTime).getTime()
				if(start > end){
					uni.showToast({
						title: '结束时间不能小于开始时间',
						icon: 'none'
					})
				} else {
					if(uni.getSystemInfoSync().platform == 'ios'){
						this.endTime = endTime.replace( /\//g, '-')
					} else {
						this.endTime = endTime
					}
					this.pageData.type == 1 ? this.getRankingList(this.startTime, this.endTime) : this.getAgentRankingList(this.startTime, this.endTime)
				}
			},
		}
	}
</script>

<style lang="less">
	.rankingList {

		// tab 栏
		.tab_box {
			width: 100vw;
			height: 102rpx;
			background-color: #FFFFFF;

			.tab_item {
				font-size: 28rpx;
				position: relative;
				color: #7B7B7B;
			}

			.active {
				color: #45806E;
				font-size: 32rpx;

				&::after {
					width: 200rpx;
					height: 10rpx;
					content: ' ';
					background-color: #557E6F;
					border-radius: 4rpx;
					position: absolute;
					top: 64rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}

		// 时间筛选
		.timeScreen {
			width: 100vw;
			height: 152rpx;
			background-color: #FFFFFF;
			box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.08);

			.list {
				width: 40%;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				border: 1px solid #D5D5D5;
				border-radius: 20rpx;
			}
		}

		// 排行榜
		.rankingList {
			width: 90vw;
			margin: 0 auto;

			.list_t {
				height: 84rpx;
				background-color: #45806E;

				.text {
					height: 100%;
					line-height: 84rpx;
					color: #FFFFFF;
					font-size: 28rpx;
				}
			}

			.list {
				height: auto;
				line-height: 84rpx;
				background-color: #FFFFFF;

				.text {
					border-top: 1px solid #F2F2F2;

					image {
						width: 50rpx;
						height: 52rpx;
						margin-top: 16rpx;
					}
				}
			}


		}

		// 自己排名
		.ownRanking{
			width: 100vw;
			height: 84rpx;
			background-color: #FFFFFF;
			position: fixed;
			bottom: 0;
			.list{
				height: 100%;
				.ranking{
					font-weight: bold;
				}
				.name{
					color: #45806E;
				}
			}
		}
	}
</style>
